<template>
  <div class="bgc-default">
    <div class="circle-2-tab pad-l-20 pad-r-20 pad-t-20">
      <!-- 基本信息 -->
      <el-form :model="contentForm" label-width="130px" ref="contentBaseForm" class="pad-t-1">
        <el-form-item label="基本信息" class="one-label">
          <el-form-item label="文章标题" 
            label-width="170px" prop="contentName" 
            :rules="requiredRule('文章标题')">
            <el-input v-model="contentForm.contentName" class="long-input" placeholder="最多输入40个字" maxlength="40" show-word-limit/>
          </el-form-item>
          <el-form-item 
            label="分类" 
            label-width="170px" prop="categoryType"
            :rules="requiredRule('文章标题')">
            <el-cascader
              v-model="contentForm.categoryType"
              class="default-input"
              :options="options"
              :props="{ checkStrictly: true }"
              clearable></el-cascader>
          </el-form-item>
        </el-form-item>
      </el-form>
      <!-- 详情 -->
      <el-form :model="contentForm" label-width="130px" ref="contentDetailsForm" class="pad-t-1">
        <el-form-item label="内容详情" class="one-label">
          <el-form-item label="文章详情" 
            label-width="170px" 
            prop="content"
            :rules="requiredRule('文章详情')">
            <vue-ueditor-wrap ref="editor" style="width: 680px;line-height: 22px;" v-model="contentForm.content" :config="ueConfig"></vue-ueditor-wrap>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-bar">
      <el-button plain @click="doBack">返回</el-button>
      <el-button type="primary" @click="doSave">保存</el-button>
    </div>
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  components: { VueUeditorWrap },
  data() {
    return {
      options: [],
      contentForm: {
        contentName: '',
        categoryType: '',
        content: ''
      },
      ueConfig: {
        toolbars: [['source', 'undo', 'fontsize', 'paragraph', '|', 'bold', 'italic', 'underline', 'strikethrough', 'forecolor', 'backcolor', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', 'blockquote', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'simpleupload', 'removeformat', 'inserttable', 'deletetable', 'insertrow', 'deletecol', 'insertcol', 'deleterow', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols']],
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%'
      }
    }
  },
  methods: {
    // 必输校验
    requiredRule(labelName) {
      return [{ required: true, message: '请输入' + labelName, trigger: 'blur' }]
    },
    // 返回事件
    doBack() {
      this.$router.go(-1)
    },
    // 保存事件
    doSave() {
      const baseForm = new Promise((resolve, reject) => {
        this.$refs['contentBaseForm'].validate((valid) => {
          if (valid) resolve()
        })
      })
      const detailsForm = new Promise((resolve, reject) => {
        this.$refs['contentDetailsForm'].validate((valid) => {
          if (valid) resolve()
        })
      })
      Promise.all([baseForm, detailsForm]).then(() => {
        // saveContent(this.contentForm).then(response => {
        //   if (response.isError) return
        //   this.$message({ message: '保存成功', type: 'success' })
        //   this.doBack()
        // })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.bgc-default{
  min-height: calc(100vh - 50px);
}
.circle-2-tab {
  padding-bottom: 70px;
  /deep/ .el-form-item {
    background: white;
  }
  /deep/.one-label>.el-form-item__content {
    border-left:#F7F8FA 10px solid;
    .el-form-item__label {
      font-size: 14px;
    }
  }
  /deep/ .el-form-item__content {
    font-size: 14px;
  }
  /deep/ .el-radio__label {
    font-size: 14px;
  }
  /deep/ .el-radio__inner {
    width: 14px;
    height: 14px;
  }
}
.long-input {
  width: 60%;
}
.img-box {
  width: 150px;
  height: 150px;
}
.video-box {
  /deep/ .el-upload--picture-card {
    width: 425px;
    height: 200px;
    line-height: 206px;
  }
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  z-index: 999;
  box-shadow: 0 -2px 8px #eeeeee;
  .el-button {
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0;
  }
}
.user-avatar {
  width: 45px;
  height: 45px;
  display: block;
  border-radius: 50%;
}
</style>
